<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';
import store from './store';
// import Button from './commonents/Button.vue'

// Class APIs 中的components只能通过装饰器去添加
// 其他不能在class内实现的属性也在此实现
@Component({
  data () {
    return {
      text: 'hello'
    }
  },
  components: {
    HelloWorld,
  },
})

export default class App extends Vue {
  //  好处可以单独给其标注类型
  text: string = 'hello'  // data 
  
  onClick () {
    console.log('123')  
   
  }

  // computed
  get  content () {
    return  this.text + 'hello'
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
